import { onMounted, onBeforeUnmount } from "vue"
import { getDounceFunc } from "@/common/utils"

type configType = {
  containerSelector: string
  leftBoxSelector: string
  rightBoxSelector: string
  moveBarSelector: string
  lMinW?: number
  rMinW?: number
  innerMarginW?: number
  help?: boolean
}


export function useResizeLR(config: configType) {
  const { help = true } = config
  if (help) {
    let remove: undefined | (() => void)

    onMounted(() => {
      remove = apply(config)
    })

    onBeforeUnmount(() => {
      remove && remove()
    })
  } else return apply(config)

  function apply(config: configType) {
    const { containerSelector, leftBoxSelector, rightBoxSelector, moveBarSelector, lMinW = 0, rMinW = 0, innerMarginW = 0 } = config

    type EL = HTMLElement | null
    const resizeC: EL = document.querySelector(containerSelector)
    const leftBox: EL = document.querySelector(leftBoxSelector)
    const moveBar: EL = document.querySelector(moveBarSelector)
    const rightBox: EL = document.querySelector(rightBoxSelector)

    moveBar!.style.cursor = "col-resize"

    const initV = { lw: leftBox!.clientWidth, mW: moveBar!.offsetWidth, rw: rightBox!.clientWidth, cW: resizeC!.clientWidth }
    let mouseDowning = false
    const start = {
      x: 0,
      lw: 0,
      rw: 0,
    }

    const downHandler = (e: MouseEvent) => {
      //  console.log('down',e)
      if (resizeC!.clientWidth < lMinW + rMinW + initV.mW + innerMarginW) return
      mouseDowning = true
      start.lw = leftBox!.clientWidth
      start.rw = rightBox!.clientWidth
      start.x = e.x
    }
    const moveHandler = (e: MouseEvent) => {
      //  console.log('move',e)
      if (mouseDowning) {
        e.preventDefault()
        const x = e.x
        const w = Math.abs(x - start.x)
        let direction: 'left' | 'right'
        let lbw: number, rbw: number
        if (x > start.x) {
          lbw = start.lw + w
          rbw = start.rw - w
          direction = 'right'
        } else {
          lbw = start.lw - w
          rbw = start.rw + w
          direction = 'left'
        }
        const setWidth = () => {
          leftBox!.style.width = lbw + 'px'
          rightBox!.style.width = rbw + 'px'
        }
        if (lbw > lMinW && rbw > rMinW) setWidth()
      }
    }
    const endHandler = (e: MouseEvent) => {
      // console.log('end',e)
      mouseDowning = false
    }

    const containerResizeHandler = getDounceFunc(() => {
      if (leftBox!.clientWidth != initV.lw) {
        leftBox!.style.width = initV.lw + 'px'
        rightBox!.style.width = `calc(100% - ${initV.lw + initV.mW + innerMarginW}px`;
      }
    }, 100, false)

    moveBar!.addEventListener('mousedown', downHandler)
    resizeC!.addEventListener('mousemove', moveHandler)
    resizeC!.addEventListener('mouseup', endHandler)
    resizeC!.addEventListener('mouseleave', endHandler)


    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        if (entry.target == resizeC) {
          containerResizeHandler()
        }
      }
    });


    resizeObserver.observe(resizeC!);

    return () => {
      moveBar!.style.cursor = 'unset'
      moveBar!.removeEventListener('mousedown', downHandler)
      resizeC!.removeEventListener('mousemove', moveHandler)
      resizeC!.removeEventListener('mouseup', endHandler)
      resizeC!.removeEventListener('mouseleave', endHandler)
      resizeObserver.disconnect()
    }
  }

}



